<!-- 各身份二维码 -->
<template>
	<view class="container">
		<uni-nav-bar @clickLeft="navBack" leftIcon="back" statusBar="true" fixed="true" :color="navColor" :background="navBg"
		 :title="title">

		</uni-nav-bar>
		<image :class="[1==1 ? 'qrcode' : '',type == 7 ? 'padding-top' : '']" :src="payQrcode" mode="widthFix"></image>
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="openSettingBtnHidden" class="qrbtn" @click="saveEwm">
			保存图片
		</view>
		<button v-else class="qrbtn" hover-class="none" open-type="openSetting" @opensetting='handleSetting'>保存图片</button>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="qrbtn" @click="saveEwmApp">
			保存图片
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="qrbtnH5">
			长按上方图片保存
		</view>
		<!-- #endif -->
		<image class="shell_bg" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/629a8202008211136212341.png"
		 mode=""></image>
		<!-- <view class="showModel" v-if="showModel">
			<view class="content-box">
				<text class="xxx" @tap="assisGo">X</text>
				<view class="title">{{showModelObj.title}}</view>
				<view class="msg">{{showModelObj.msg}}</view>
				<view class="btn-model" @tap="assisGo">确认</view>
			</view>
			
		</view> -->
	</view>
</template>

<script>
	var _self;
	import {
		userShare,
		userShareH5,
		userPromoterCheck_auth
	} from '@/api/user.js'
	export default {
		components: {},
		data() {
			return {
				navColor: '#fff',
				navBg: "inherit",
				payQrcode: "",
				openSettingBtnHidden: true, //是否授权
				type: null,
				title: '推广二维码',
				active: 0,
				qrcode_type: 'share'
			}
		},
		onLoad(option) {
			if (!option.type) {
				this.qrcode_type = 'share'
			} else if (option.type == 1) { //商户
				this.title = '商户收款码'
				this.qrcode_type = 'pay'
			} else if (option.type == 3) { //渠道商
				this.title = '渠道商二维码'
				this.qrcode_type = 'channel'
			} else if (option.type == 4) { //地推
				this.title = '地推二维码'
				this.qrcode_type = 'channel_dealer'
			} else if (option.type == 7) { //小助手
				this.title = '小助手推广商家'
				this.qrcode_type = 'promoter_seller'
			}
		},
		onShow() {
			this.getCode()
		},
		onPageScroll(e) {
			this.navBg = "rgba(0,0,0," + e.scrollTop / 80 + ')'
		},
		methods: {
			navBack() {
				uni.navigateBack({

				})
			},
			getCode() {
				if (!uni.getStorageSync('userInfo').is_checked) { //未认证
					uni.showModal({
						content: "需实名认证",
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pages/center/accountSet/certification/certification?codeback=${true}`
								})

							} else if (res.cancel) {
								uni.navigateBack({

								})
							}
						}
					})
					return
				}
				//#ifdef MP-WEIXIN
				userShare({
					qrcode_type: this.qrcode_type
				}).then(res => {
					this.payQrcode = res.data.url;
				})
				//#endif
				//#ifndef MP-WEIXIN
				userShareH5({
					qrcode_type: this.qrcode_type
				}).then(res => {
					this.payQrcode = res.data.url;
				})
				//#endif
			},
			//微信小程序保存到相册
			handleSetting(e) {
				if (!e.detail.authSetting['scope.writePhotosAlbum']) {
					_self.openSettingBtnHidden = false;
				} else {
					_self.openSettingBtnHidden = true;
				}
			},
			saveEwmApp() {
				let _self = this
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function(res) {
						if (res.confirm) {
							uni.downloadFile({
								url: _self.payQrcode, //图片地址
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败",
													icon: "none"
												});
											}
										});
									}
								}
							})


						} else if (res.cancel) {

						}
					}
				});
			},
			saveEwm: function(e) {
				//获取相册授权
				let _self = this
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									//这里是用户同意授权后的回调
									_self.saveImgToLocal();
								},
								fail() { //这里是用户拒绝授权后的回调
									_self.openSettingBtnHidden = false
								}
							})
						} else { //用户已经授权过了
							_self.saveImgToLocal();
						}
					}
				})
			},
			saveImgToLocal: function(e) {
				let _self = this
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: function(res) {
						if (res.confirm) {

							uni.downloadFile({
								url: _self.payQrcode, //图片地址
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败",
													icon: "none"
												});
											}
										});
									}
								}
							})


						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #222;
	}
</style>
<style lang="scss" scoped>
	.container {
		position: relative;

		.shell_bg {
			margin: 0;
			width: 100%;
			height: 120rpx;
		}

		.qrcode {
			display: block;
			margin: 20rpx auto;
			width: 80%;
		}

		.padding-top {
			padding-top: 176rpx;
			width: 80%;
			height: 74vh;

		}

		.lit-assis {
			color: #333;
			display: flex;
			justify-content: space-around;
			width: 70%;
			margin: 20rpx auto 50rpx;

			view {
				border-radius: 23rpx;
				padding: 8rpx 12rpx;
			}

			.active-item {
				transition: color .2s linear;
				background: rgba(242, 244, 242, 1);
				font-size: 28rpx;
				font-weight: 800;
				color: #333;
			}

			.normal-item {
				font-size: 26rpx;
				font-weight: 800;
				color: #fff;
			}
		}

		.qrbtn {
			background: $theme-color;
			border-radius: 40rpx;
			height: 80rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			line-height: 80rpx;
			width: 80%;
			margin: 40rpx auto 0rpx;
			text-align: center;
		}
		.qrbtnH5{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>
